<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://www.google.com/jsapi"></script>
    <link rel="stylesheet" href="jquery-ui-1.8.14.custom.css" type="text/css" />
	<link type="text/css" rel="stylesheet" href="base.css"/>
	<title>プロジェクト詳細</title>
<script>
  google.load("jquery", "1.6.2");
  google.load("jqueryui", "1.8.0");
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  var current = 7000;
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', '合計');
    data.addRows(4);
    data.setValue(0, 0, '18:00');
    data.setValue(0, 1, 3000);
    data.setValue(1, 0, '19:00');
    data.setValue(1, 1, 6000);
    data.setValue(2, 0, '20:00');
    data.setValue(2, 1, 7000);
    data.setValue(3, 0, '21:00');
    data.setValue(3, 1, current);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, title: '応援グラフ', vAxis: {title: '円', minValue: 1000}, hAxis: {title: '時間'} });
  }
  function updateGraph(v) {
    current += v;
    drawChart();
  }
  function openSub() {
    $("#message-edit-dialog").dialog({
        bgiframe: true,
        modal: true,
        buttons: {
            "OK": function () {
                var message = $("#message-field").val();
                $("#message-field").val('')
                var num = parseInt(message);
                if (!isNaN(num)){
                  updateGraph(num);
                }
                $(this).dialog("destroy");
            },
            "キャンセル": function () {
                $(this).dialog("destroy");
            }
        }
    });
  }
</script>
</head>
<!-- 
<style type="text/css">
#content{
margin:0;
padding:0;
border:0;
width: 800px;
}
#left{
float:left;
margin:0;
padding:0;
border:0;
width:400px;
}
#right{
float:right;
margin:0;
padding:0;
border:0;
width:400px;
}
#icons{
}
.dialog{
display:none;
}
</style>
-->
<body>
    <div id="container">
		<!-- ヘッダ -->
		<div id="header">
		<div id="header_inner">
			<div id="header_title"><p>まねぽん！</p>
			</div>
		</div>

      <div id="content">
      <div id="content_inner">
        <div id="left">
          flash
        </div>
        <div id="right">
          <input type="button" value="￥" onclick="openSub();" />
          <div>
            <span>プロジェクト概要</span>
            <div>
              ・・・
            </div>
          </div>
          <div>
            <span>進捗</span>
            <div>
              ・・・
            </div>
          </div>
          <div>
            <span>資料</span>
            <div>
              ・・・
            </div>
          </div>
          <div id="chart_div"></div>
        </div>
        <br style="clear:both;" />
      </div>
      </div>
      <div id="icons"></div>
    </div>


<div class="dialog" id="message-edit-dialog" title="応援する">
  <form id="message-edit-form" method="post">
    <input type="text" id="message-field" />円
    <select>
      <option value="">応援</option>
      <option value="">予約</option>
      <option value="">成功報酬</option>
    </select>
  </form>
</div>

  </body>
</html>